:host {
  display: contents;
}

.container {
  --background-color: var(--bl-color-neutral-full);

  display: flex;
  flex-direction: column;
  background: var(--background-color);
  width: var(--bl-dialog-width, auto);
  max-width: calc(100vw - var(--bl-size-4xl));
  max-height: calc(100vh - var(--bl-size-4xl));
  min-width: 424px;
  padding: 0;
  border: 0;
  border-radius: var(--bl-border-radius-l);
}

.dialog,
.dialog-polyfill .container {
  padding: 0;
  border: 0;
  border-radius: var(--bl-border-radius-l);
}

.dialog-polyfill .container {
  position: fixed;
  z-index: var(--bl-index-dialog);
}

.dialog::backdrop {
  background-color: #273142b3;
}

.dialog-polyfill {
  display: none;
  position: fixed;
  inset-inline-start: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  z-index: var(--bl-index-dialog);
  background-color: #273142b3;
}

:host([open]) .dialog-polyfill {
  display: flex;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--bl-size-2xs);
  padding: var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl);
}

header bl-button {
  margin-inline-start: auto;
}

header h2 {
  font: var(--bl-font-title-1-medium);
  color: var(--bl-color-neutral-darker);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--bl-dialog-caption-line-clamp, 1);
  margin: 0;
  padding: 0;
}

.content {
  padding: var(--bl-size-xl);
  overflow: auto;
}

:host([critical]) .content {
  padding-top: 0;
}

.container.has-footer .content {
  padding-bottom: 0;
}

footer {
  display: none;
}

.container.has-footer footer {
  padding: var(--bl-size-xl);
  display: flex;
  flex-flow: row-reverse wrap;
  gap: var(--bl-size-m);
}

footer.shadow {
  /* FIXME: Use variables for sizes */
  box-shadow: 0 -4px 15px #27314226;
}

@media only screen and (max-width: 471px) {
  .container {
    max-width: calc(100vw - var(--bl-size-2xl));
    max-height: calc(100vh - var(--bl-size-2xl));
    min-width: auto;
    min-height: auto;
  }

  footer {
    flex-flow: column wrap;
  }
}

::slotted(bl-tab-group) {
  display: block;
  transform: translateX(calc(var(--bl-size-xl) * -1));
  width: calc(100% + calc(var(--bl-size-xl) * 2));
}
